<script setup>

import {useCounterStore} from '@/piniaStore/count'
import {useMusicStore} from '@/piniaStore/music'


const counter = useCounterStore();

const musicStore = useMusicStore();


const addCount=()=>{
    counter.increment(2)
}

const getMaxId=()=>{
    
    // 约定：音乐编号的规则：两位的类型编号+三位的序号。

    // 假定目前选择的音乐类型的编号是01。
    // 1、先获取 id以01开头的最大序号
    // 01002
    const arr = musicStore.musicList.filter(item=>item.id.startsWith("01")).sort((a,b)=>{
        return b.id - a.id;
    })

    // console.log("arr[0].id",arr[0].id);
    let maxId = arr[0].id;

    // 2、在最大号的基础上加1
    // 3
    maxId = Number(maxId.slice(2,5)) + 1; 

    // 3、把类型编号和最大号进行拼接（补够三位序号）
    // 01003
    maxId = "01" + maxId.toString().padStart(3,"0");

    // console.log("maxId",maxId);
    return maxId;
}

getMaxId();

const addMusic=()=>{

    musicStore.addMusic({
        id:getMaxId(),
        name:"你是我的心肝"
    })
}

</script>

<template>
    <h1>pinia示例：</h1>
    <p>counter.count:{{ counter.count }}</p>
    <button @click="addCount">+</button>
    <hr/>
    <ul>
        <li v-for="(music,index) in musicStore.musicList" :key="music.id">
            <p>编号：{{music.id}}</p>    
            <p>歌名：{{music.name}}</p>   
        </li>
    </ul>
    
    <button @click="addMusic">添加一首歌</button>
    <hr/>

</template>

<style lang="css" scoped>
    
</style>
